<template>
  <div class="card-content">
    <div class="card-content-grid left" style="flex: 1">
      <slot name="header">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>{{ content.title }}</a-breadcrumb-item>
        </a-breadcrumb>
      </slot>
      <a-row :gutter="[16,16]">
        <a-col v-for="(cart, index) in content.data"
               :key="index"
               :xs="12" :sm="8" :md="8" :lg="6" :xl="4" :xxl="4" :span="4">
          <a-card          @click="to_page(cart)"
                           hoverable style="width: 100%;">
            <img       slot="cover"
                       :src="cart.img" :to="`/desc-va?url=${cart.url}&title=${cart.title}`" style="width: 100%; height: 153px;object-fit: cover" :alt="cart.desc">
            <a-card-meta :title="cart.title">
              <template slot="description">
                {{ cart.desc }}
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <div class="card-content-grid right"
         style="flex: 0 0 270px;width: 270px;margin-left: 20px" v-if="showCategoryType">
      <slot name="header-classify"></slot>
      <a-card hoverable>
        <div  v-for="(value, key) of categoryType" :key="key" v-if="['type', 'rand', 'act'].includes(key)">
          <nuxt-link :to="`/category-type?page_type=${pageType}&${key}=${item.tag}`"
                     :key="item.tag"
                     v-for="item in value.slice(1)">
            <a-tag style="margin-bottom: 4px;cursor: pointer" :color="'pink'">{{item.title}}</a-tag>
          </nuxt-link>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "cart-content",
  props: {
    "title": {
      type: String,
      default: '标题'
    },

    'showCategoryType': {
      type: Boolean,
      default: false
    },

    'categoryType': {
      type: Object,
      default: function () {
        return {}
      }
    },

    'pageType': {
      type: String,
      default: 'serial'
    },

    'content': {
      type: Object,
      default: function () {
        return {}
      }
    },


  },

  methods: {

    to_page(query) {
      this.$router.push({
        path: '/desc-va',
        query: {
          url: query.url,
          title: query.title
        }
      })
    },


    to_next_page(key, query) {
      this.$router.push({
        path: '/category-type',
        query: {
          ...this.$route.query,
          [key]: query.tag,
        }
      })
    }
  }

}
</script>

<style lang="scss">
.card-content {
  overflow: hidden;
  padding: 0;
  display: flex;
   .left {
    .ant-card-body {
      padding: 10px;
      height: 80px;
    }
  }
}
</style>
